<template>
  <div class="approval">
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div style="padding: 5px; box-sizing: border;" 
      v-bind:class="[propC.isActive6? 'bg1': '']" 
      @click="changeFn('6')"
      class="id-info-box">
        <div class="head-title2">
          <div class="head-title">
            <div class="title">{{$t('approvalDetail.IDInfo')}}</div>
            <div class="info">
              <span>{{$t('approvalDetail.AuthResults')}}:</span>
              <span>
                {{info.authMsg}}
                <a
                  href="javascript:void(0);"
                  class="results"
                  @click="seeResult"
                >{{$t('approvalDetail.hitsee')}}</a>
              </span>
            </div>
            <div class="info">
              <span v-if="info.isPass === '1' || info.isPass === ''">{{$t('approvalDetail.FaceComSus')}}</span>
              <span v-if="info.isPass === '2'">{{$t('approvalDetail.FaceComFail')}}</span>
            </div>
          </div>
          <div class="info">
            <el-button
              type="primary"
              size="small"
              @click.stop="addDescFn1"
              style="background: #6083f7; border-color: #6083f7;"
            >{{$t('approvalDetail.addDesc')}}</el-button>
          </div>
        </div>
        <div class="id-info">
          <el-col :span="6">
            <div class="id-imgs">
              <div id="image">
                <div v-for="(item, index) in img1" :key="index">
                  <div>
                    <span v-if="item.imageType === 1">{{$t('approvalDetail.idcard')}}</span>
                    <span v-if="item.imageType === 2">{{$t('approvalDetail.HandIDimg')}}</span>
                  </div>
                  <img :src="item.imagePathUrl" alt>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="detail-info">
              <div class="detail-info-item">
                <span>{{$t('approval.IdNumber')}}:</span>
                <span>{{info.cardNum}}</span>
                <span>
                  <a
                    href="javascript:void(0);"
                    class="results"
                    @click="seeCellPhoneNum"
                  >{{$t('approvalDetail.hitsee')}}</a>
                </span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('user.name')}}:</span>
                <span>{{info.realName}}</span>
              </div>
              <div class="detail-info-item">
                <span style="width: 70px;">{{$t('approvalDetail.province')}}:</span>
                <span>{{info.province}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.certifiedDate')}}:</span>
                <span>{{info.birthday}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('RiskManager.age')}}:</span>
                <span>{{info.appUserAge}}</span>
              </div>
              <div class="detail-info-item">
                <span style="width: 70px;">{{$t('approvalDetail.city')}}:</span>
                <span>{{info.city}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.BloodType')}}:</span>
                <span>{{info.bloodType}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.LargeAreaCode')}}:</span>
                <span>{{info.rt}}</span>
              </div>
              <div class="detail-info-item">
                <span style="width: 70px;">{{$t('approvalDetail.area')}}:</span>
                <span>{{info.district}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.nationality')}}:</span>
                <span>{{info.nationality}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.CellNumber')}}:</span>
                <span>{{info.rw}}</span>
              </div>
              <div class="detail-info-item">
                <span style="width: 70px;">{{$t('approvalDetail.village')}}:</span>
                <span>{{info.village}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.Occupation')}}:</span>
                <span>{{info.occupation}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.marriage')}}:</span>
                <span>{{info.maritalStatus}}</span>
              </div>
              <div class="detail-info-item">
                <span style="width: 70px;">{{$t('approvalDetail.DetailedAddress')}}:</span>
                <span>{{info.address}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.homeplace')}}:</span>
                <span>{{info.birthPlace}}</span>
              </div>
              <div class="detail-info-item">
                <span>{{$t('approvalDetail.paperDataDue')}}:</span>
                <span>{{info.expiryDate}}</span>
              </div>
            </div>
          </el-col>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div style="padding: 5px; box-sizing: border;" 
      v-bind:class="[propC.isActive7? 'bg1': '']" 
      @click="changeFn('7')"
      class="supple-info">
        <div class="head-title2">
          <div class="title">{{$t('approvalDetail.SuppleInfor')}}</div>
          <div class="info">
            <el-button
              type="primary"
              size="small"
              @click.stop="addDescFn2"
              style="background: #6083f7; border-color: #6083f7;"
            >{{$t('approvalDetail.addDesc')}}</el-button>
            <el-button type="warning" size="small" @click="dataReturnFn('additional_information_code')">{{$t('approval.dataReturn')}}</el-button>
          </div>
        </div>
        <div class="id-photo">
          <div id="image2">
            <div v-for="(item, index) in img2" :key="index">
              <img :src="item.imagePathUrl" alt>
              <div class="supply-img">
                <span v-if="item.imageType === 3">{{$t('approvalDetail.imageType3')}}</span>
                <span v-if="item.imageType === 4">{{$t('approvalDetail.imageType4')}}</span>
                <span v-if="item.imageType === 5">{{$t('approvalDetail.imageType5')}}</span>
                <span v-if="item.imageType === 6">{{$t('approvalDetail.imageType6')}}</span>
                <span v-if="item.imageType === 7">{{$t('approvalDetail.imageType7')}}</span>
                <span v-if="item.imageType === 8">{{$t('approvalDetail.imageType8')}}</span>
                <span v-if="item.imageType === 9">{{$t('approvalDetail.imageType9')}}</span>
                <span v-if="item.imageType === 10">{{$t('approvalDetail.imageType10')}}</span>
                <span v-if="item.imageType === 11">{{$t('approvalDetail.imageType11')}}</span>
                <span v-if="item.imageType === 12">{{$t('approvalDetail.imageType12')}}</span>
                <button
                  type="button"
                  class="click-img"
                  @click.stop="uploadHeadImg(index)"
                >{{$t('approvalDetail.editImg')}}</button>
                <input
                  type="file"
                  accept="image/*"
                  @change="handleFile($event, index, item)"
                  class="hiddenInput"
                  :id="'text'+index"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div style="padding: 5px; box-sizing: border;" 
      v-bind:class="[propC.isActive8? 'bg1': '']" 
      @click="changeFn('8')"
      class="bank-info">
        <div class="head-title2">
          <div class="head-title">
            <div class="title">{{$t('approvalDetail.bankCardInfo')}}</div>
            <div class="info">
              <span>{{$t('approvalDetail.VerificationState')}}:</span>
              <span
                class="flag-btn"
                v-if="info.bankCardCheck === ''"
                style="border: 1px solid #e6a23c; color: #fff; background: #e6a23c;"
              >{{$t('approvalDetail.noAuthority')}}</span>
              <span
                class="flag-btn"
                v-if="info.bankCardCheck === '1'"
                style="border: 1px solid #f56c6c; color: #fff; background: #f56c6c;"
                :disabled="isAuthority"
              >{{$t('approvalDetail.failAuthority')}}</span>
              <span
                class="flag-btn"
                v-if="info.bankCardCheck === '2'"
                style="border: 1px solid #67c23a; color: #fff; background: #67c23a;"
              >{{$t('approvalDetail.susAuthority')}}</span>
            </div>
          </div>
          <div class="info">
            <el-button
              type="primary"
              size="small"
              @click.stop="addDescFn3"
              style="background: #6083f7; border-color: #6083f7;"
            >{{$t('approvalDetail.addDesc')}}</el-button>
          </div>
        </div>
        <div class="detail-info">
          <el-col :span="4" >
            <div class="id-imgs">
              <div id="image3">
                <span>{{$t('approvalDetail.bankCards')}}</span>
                <img :src="img3.imagePathUrl" alt>
              </div>
            </div>
          </el-col>
          <el-col :span="18" style="margin:20px 0 0 20px;">
            <div class="detail-info-item">
              <span style="width: 70px;">{{$t('approvalDetail.cardHolder')}}:</span>
              <span>{{info.realName}}</span>
            </div>
            <div class="detail-info-item">
              <span style="width: 90px;">{{$t('approvalDetail.BankAccount')}}:</span>
              <span v-show="info.cardExist === 1" style="color: red;">{{info.bankCard}}</span>
              <span v-show="info.cardExist === 0" style="color: #8a8a8c;">{{info.bankCard}}</span>
              <span>
                <a
                  href="javascript:void(0);"
                  class="results"
                  @click="seeBankCard"
                >{{$t('approvalDetail.hitsee')}}</a>
              </span>
            </div>
            <div class="detail-info-item">
              <span>{{$t('approvalDetail.BankName')}}:</span>
              <span>{{info.bankName}}</span>
            </div>
          </el-col>
        </div>
      </div>
    </el-card>
    <el-dialog :title="$t('collDetail.orderDetail')" :visible.sync="dialogBankCardOrder">
      <div>
        <el-tabs v-model="channelName" @tab-click="channelClick">
          <el-tab-pane
            v-for="(item, index) in bankCardChannel"
            :key="index"
            :label="item.appShortName"
            :name="item.channel"
          >
            <el-table :data="bankCardDetail" border stripe style="width: 100%">
              <el-table-column
                header-align="center"
                align="center"
                :label="$t('approvalDetail.orderId')"
                width="170"
                prop="orderId"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="appUserNameNew"
                :label="$t('approval.phoneNo')"
                width="150"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="crtTime"
                :label="$t('approval.time')"
                width="150"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="lendDate"
                :label="$t('approvalDetail.loanTime')"
                width="150"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="loanAmt"
                :label="$t('approvalDetail.neteceipts')"
                width="150"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="realRepayDate"
                :label="$t('approvalDetail.realRepayDate')"
                width="160"
              ></el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="status"
                :label="$t('approvalDetail.orderStatus')"
                width="150"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.status=== 1 || scope.row.status=== 2"
                  >{{$t('approvalDetail.audit')}}</span>
                  <span v-if="scope.row.status=== 3">{{$t('approval.repayments')}}</span>
                  <span v-if="scope.row.status=== 4">{{$t('approval.refused')}}</span>
                  <span v-if="scope.row.status=== 5">{{$t('approval.clear')}}</span>
                  <span v-if="scope.row.status=== 6">{{$t('approvalDetail.status4')}}</span>
                  <span v-if="scope.row.status=== 7">{{$t('approvalDetail.status5')}}</span>
                  <span v-if="scope.row.status=== 8">{{$t('approvalDetail.status6')}}</span>
                  <span v-if="scope.row.status=== 9">{{$t('approvalDetail.blankOut')}}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination
                @size-change="handleSizeChangeBankCard"
                @current-change="handleCurrentChangeBankCard"
                :current-page="bankCardPage.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="bankCardPage.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="bankCardTotal"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogBankCardOrder = false">{{$t('btn.close')}}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="$t('approvalDetail.phoneDetail')" :visible.sync="dialogCellPhoneNumVisible">
      <div style="width: 100%; display: flex; justify-content: center;">
        <div>
          <div class="cell-phone-item" style="font-weight: bold;">{{$t('approval.phoneNo')}}</div>
          <div class="cell-phone-item" v-for="(item, index) in cellPhoneArr" :key="index">{{item}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogCellPhoneNumVisible = false">{{$t('btn.close')}}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogDescForm">
      <el-form
        :model="descForm"
        ref="descForm"
        label-width="100px"
        style="width: 90%;"
      >
        <el-form-item :label="$t('grouping.remark')">
          <el-input
            type="textarea"
            size="small"
            v-model="descForm.remark"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="dialogStatus == 'idinfo'"
          type="primary"
          @click="descFormSave1('descForm')"
        >{{$t('btn.complete')}}</el-button>
        <el-button
          v-if="dialogStatus == 'suppleinfo'"
          type="primary"
          @click="descFormSave2('descForm')"
        >{{$t('btn.complete')}}</el-button>
        <el-button
          v-if="dialogStatus == 'bankinfo'"
          type="primary"
          @click="descFormSave3('descForm')"
        >{{$t('btn.complete')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import { mapGetters } from "vuex";
import {
  getInfo,
  getImg,
  uploadImageBusiness,
  uploadImageDate,
  appAllChannel,
  yinHangOrderPage,
  getResultById,
  multiPhoneCheckResult,
  orderBack,
  insertApprovalRemark,
  getApprovalRemark
} from "api/trust/firstApprDetails/index";
import SUPPLEIMG from "assets/images/default-supple.jpg";
import { bankUntied } from "api/trust/orderQuery/index";
export default {
  props: ['propC'],
  data() {
    return {
      info: {},
      imgList: [],
      listObj: {},
      riskModelData: {
        grade: "",
        suggest: ""
      },
      lanStatus: null,
      img1: [],
      img2: [],
      img3: {
        imageName: "",
        imagePathUrl: SUPPLEIMG,
        imagePath: "",
        imageType: 13
      },
      newSuppleList: [],
      imgUrl: [
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 3
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 4
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 5
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 6
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 7
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 8
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 9
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 10
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 11
        },
        {
          imageName: "",
          imagePathUrl: SUPPLEIMG,
          imagePath: "",
          imageType: 12
        }
      ],
      dialogBankCardOrder: false,
      channelName: "",
      bankCardChannel: [],
      bankCardTotal: null,
      bankCardDetail: [],
      bankCardPage: {
        limit: 5,
        page: 1,
        cardNum: "",
        channel: ""
      },
      isAuthority: false,
      continue: "",
      cellPhoneArr: [],
      dialogCellPhoneNumVisible: false,
      returnData: {
        businessUserId: '',
        userId: '',
        appPackageName: '',
        channel: '',
        orderId: '',
        authPageCode: ''
      },
      dialogDescForm: false,
      descForm: {
        remark: ""
      },
      dialogStatus: '',
      textMap: {
        idinfo: this.$t('approvalDetail.idInfoDesc'),
        suppleinfo: this.$t('approvalDetail.suppleInfoDesc'),
        bankinfo: this.$t('approvalDetail.bankCardInfoDesc'),
      },
    };
  },
  computed: {
    ...mapGetters(["elements", "language", "firstApprDetails"])
  },
  created() {
    this.getParamsDetail();
    if (this.language === "zh") {
      this.lanStatus = 1;
    } else if (this.language === "en") {
      this.lanStatus = 2;
    } else {
      this.lanStatus = 3;
    }
    this.getPersonInfo();
    // 银行卡渠道
    let bankCardObj = {};
    bankCardObj.channel = this.listObj.channel;
    appAllChannel(bankCardObj).then(res => {
      if (res.status === 200) {
        this.bankCardChannel = res.data;
        this.channelName = res.data[0].channel;
      }
    });
  },
  mounted() {
    this.viewer();
  },
  methods: {
    getParamsDetail() {
      this.listObj = this.firstApprDetails;
    },
    changeFn(module) {
      this.$emit('change-module', module) // 用来触发父组件定义的@change-type
    },
    //身份信息
    getPersonInfo() {
      let per = {};
      per.orderId = this.listObj.orderId;
      per.userUUID = this.listObj.userUUID;
      per.msgType = this.lanStatus;
      getInfo(per).then(res => {
        let re = /(?=(?!\b)(\d{3})+$)/g;
        let str = String(res.data.applyAmt);
        res.data.applyAmt = str.replace(re, ",");
        this.info = res.data;
        if (res.data.loanContinued === 0) {
          this.continue = this.$t("approvalDetail.no");
        } else if (res.data.loanContinued === 1) {
          this.continue = this.$t("approvalDetail.yes");
        }
        if (res.data.isBankUntied === "1") {
          this.isAuthority = true;
        } else if (res.data.isBankUntied === "0") {
          this.isAuthority = false;
        }
      });
    },
    // 点击资料退回按钮
    dataReturnFn(type) {
      this.$confirm(this.$t("approvalDetail.dataReturnWarn"), {
        confirmButtonText: this.$t("btn.confirm"),
        cancelButtonText: this.$t("btn.cancel"),
        type: "warning",
        center: true
      })
      .then(() => {
        this.returnData.appPackageName = this.listObj.appPackageName;
        this.returnData.channel = this.listObj.channel;
        this.returnData.orderId = this.listObj.orderId;
        this.returnData.userId = this.listObj.userId;
        this.returnData.businessUserId = this.listObj.checkUserId;
        this.returnData.authPageCode = type;
        this.returnData.msgType = this.lanStatus;
        this.returnData.type = 1;
        orderBack(this.returnData)
        .then(res => {
            if ( res.status === 200) {
              this.$message({
                showClose: true,
                type: "success",
                message: this.$t('approval.warnSus')
              });
              let view = {};
              view.name = this.$route.name;
              view.path = this.$route.path;
              this.$store.dispatch('delVisitedViews', view)
              this.$router.push('/trust/firstApproval')
            }
        })
      })
      .catch(() => {
        this.$message({
          showClose: true,
          type: "info",
          message: this.$t("loanDetail.cue3")
        });
      });
    },
    // 查看认证结果
    seeResult() {
      let obj = {};
      obj.orderId = this.listObj.orderId;
      obj.msgType = this.lanStatus;
      getResultById(obj).then(response => {
        this.info.authMsg = response.data;
      });
    },
    // 查看手机号
    seeCellPhoneNum() {
      let obj = {};
      obj.orderId = this.listObj.orderId;
      multiPhoneCheckResult(obj).then(res => {
        if (res.status === 200) {
          this.cellPhoneArr = res.data;
          this.dialogCellPhoneNumVisible = true;
        }
      });
    },
    // 打开图片上传
    uploadHeadImg(index) {
      let ele = document.getElementById("text" + index);
      ele.click();
    },
    // 将头像显示
    handleFile(e, i, item) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      if (typeof file == "undefined" || file.size <= 0) {
        alert("请选择图片");
        return;
      }
      var reader = new FileReader();
      reader.onload = data => {
        let res = data.target || data.srcElement;
        this.img2[i].imagePathUrl = res.result;
      };
      reader.readAsDataURL(file);
      // 上传
      const obj = new FormData();
      obj.append("file", file);
      uploadImageBusiness(obj).then(res => {
        if (res.status === 200) {
          let obj = {};
          obj.orderId = this.listObj.orderId;
          obj.fileType = item.imageType;
          obj.filePath = res.data.filePath;
          obj.channel = this.listObj.channel;
          uploadImageDate(obj).then(res => {
            this.$message({
              showClose: true,
              type: "success",
              message: this.$t("rule.uploadSus")
            });
          });
        }
      });
    },
    compare(property) {
      return function(a, b) {
        let value1 = a[property];
        let value2 = b[property];
        return value1 - value2;
      };
    },
    viewer() {
      //获取图片
      let imgs = {};
      imgs.userId = this.listObj.userId;
      imgs.channel = this.listObj.channel;
      imgs.orderId = this.listObj.orderId;
      getImg(imgs).then(res => {
        this.imgList = res.data.imgPathList;
        let suppleList = [];
        this.imgList.forEach(item => {
          if (item.imageType === 1) {
            this.img1.push(item);
          } else if (item.imageType === 2) {
            this.img1.push(item);
          } else if (item.imageType === 13) {
            this.img3 = item
          } else {
            suppleList.push(item);
          }
        });
        for (let i = 0; i < this.imgUrl.length; i++) {
          let obj = this.imgUrl[i];
          let num = obj.imageType;
          let isExist = false;
          for (let j = 0; j < suppleList.length; j++) {
            let aj = suppleList[j];
            let n = aj.imageType;
            if (n == num) {
              isExist = true;
              break;
            }
          }
          if (!isExist) {
            this.newSuppleList.push(obj);
          }
        }
        this.img2 = this.newSuppleList.concat(suppleList);
        this.img2.sort(this.compare("imageType"));
        this.$nextTick(() => {
          const viewer = new Viewer(document.getElementById("image"));
          const viewer2 = new Viewer(document.getElementById("image2"));
          const viewer3 = new Viewer(document.getElementById("image3"));
        });
      });
    },
    // 点击鉴权失败
    failFn() {
      this.$confirm(this.$t("approvalDetail.confirmReturn"), {
        confirmButtonText: this.$t("btn.confirm"),
        cancelButtonText: this.$t("btn.cancel"),
        type: "warning",
        center: true
      })
        .then(() => {
          let obj = {};
          let arr = [];
          arr.push(this.listObj.orderId);
          obj.orderIds = arr;
          bankUntied(obj).then(res => {
            if (res.status === 200) {
              this.getPersonInfo();
              this.$message({
                showClose: true,
                message: this.$t("approvalDispatch.opersuccess"),
                type: "success"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: this.$t("orderQuery.cue2")
          });
        });
    },
    //银行卡弹窗点击标签
    channelClick(tab, event) {
      this.bankCardPage.cardNum = this.info.bankCard;
      this.bankCardPage.channel = tab.name;
      yinHangOrderPage(this.bankCardPage).then(res => {
        if (res.status === 200) {
          res.data.rows.forEach(item => {
            if (item.loanAmt === null) {
              item.loanAmt = "";
            } else {
              let re = /(?=(?!\b)(\d{3})+$)/g;
              let str = String(item.loanAmt);
              item.loanAmt = str.replace(re, ",");
            }
          });
          this.bankCardDetail = res.data.rows;
          this.bankCardTotal = Number(res.data.total);
        }
      });
    },
    //查看银行卡关联的订单
    seeBankCard() {
      this.dialogBankCardOrder = true;
      this.getBankCodelist();
    },
    //银行卡列表
    getBankCodelist() {
      this.bankCardPage.cardNum = this.info.bankCard;
      this.bankCardPage.channel = this.channelName;
      yinHangOrderPage(this.bankCardPage).then(res => {
        if (res.status === 200) {
          res.data.rows.forEach(item => {
            if (item.loanAmt === null) {
              item.loanAmt = "";
            } else {
              let re = /(?=(?!\b)(\d{3})+$)/g;
              let str = String(item.loanAmt);
              item.loanAmt = str.replace(re, ",");
            }
          });
          this.bankCardDetail = res.data.rows;
          this.bankCardTotal = Number(res.data.total);
        }
      });
    },
    handleSizeChangeBankCard(val) {
      this.bankCardPage.limit = val;
      this.getBankCodelist();
    },
    handleCurrentChangeBankCard(val) {
      this.bankCardPage.page = val;
      this.getBankCodelist();
    },
    // 添加身份信息备注
    addDescFn1() {
      this.dialogStatus = 'idinfo';
      let obj = {};
      obj.orderId = this.listObj.orderId;
      obj.type = '3';
      getApprovalRemark(obj)
      .then(res => {
        if (res.status === 200) {
          this.dialogDescForm = true;
          this.descForm.remark = res.data;
        }
      })
    },
    // 添加身份信息备注保存
    descFormSave1(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm(this.$t("orderDivision.isSave"), {
            confirmButtonText: this.$t("btn.confirm"),
            cancelButtonText: this.$t("btn.cancel"),
            type: "warning",
            center: true
          })
            .then(() => {
              let obj = {};
              obj.orderId = this.listObj.orderId;
              obj.desc = this.descForm.remark;
              obj.type = '3';
              insertApprovalRemark(obj)
              .then(res => {
                if (res.status === 200) {
                  this.dialogDescForm = false;
                  this.$emit('click-complete', '6')
                  this.$notify({
                    title: this.$t("user.success"),
                    message: this.$t("approvalDetail.cue2"),
                    type: "success",
                    duration: 2000
                  });
                }
              })
            })
            .catch(() => {
              this.$message({
                showClose: true,
                type: "info",
                message: this.$t("loanDetail.cue3")
              });
            });
        } else {
          return false;
        }
      });
    },
    // 添加补充信息备注
    addDescFn2() {
      this.dialogStatus = 'suppleinfo';
      let obj = {};
      obj.orderId = this.listObj.orderId;
      obj.type = '4';
      getApprovalRemark(obj)
      .then(res => {
        if (res.status === 200) {
          this.dialogDescForm = true;
          this.descForm.remark = res.data;
        }
      })
    },
    // 添加补充信息备注保存
    descFormSave2(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm(this.$t("orderDivision.isSave"), {
            confirmButtonText: this.$t("btn.confirm"),
            cancelButtonText: this.$t("btn.cancel"),
            type: "warning",
            center: true
          })
            .then(() => {
              let obj = {};
              obj.orderId = this.listObj.orderId;
              obj.desc = this.descForm.remark;
              obj.type = '4';
              insertApprovalRemark(obj)
              .then(res => {
                if (res.status === 200) {
                  this.dialogDescForm = false;
                  this.$emit('click-complete', '7')
                  this.$notify({
                    title: this.$t("user.success"),
                    message: this.$t("approvalDetail.cue2"),
                    type: "success",
                    duration: 2000
                  });
                }
              })
            })
            .catch(() => {
              this.$message({
                showClose: true,
                type: "info",
                message: this.$t("loanDetail.cue3")
              });
            });
        } else {
          return false;
        }
      });
    },
    // 添加银行卡信息备注
    addDescFn3() {
      this.dialogStatus = 'bankinfo';
      let obj = {};
      obj.orderId = this.listObj.orderId;
      obj.type = '5';
      getApprovalRemark(obj)
      .then(res => {
        if (res.status === 200) {
          this.dialogDescForm = true;
          this.descForm.remark = res.data;
        }
      })
    },
    // 添加银行卡信息备注保存
    descFormSave3(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm(this.$t("orderDivision.isSave"), {
            confirmButtonText: this.$t("btn.confirm"),
            cancelButtonText: this.$t("btn.cancel"),
            type: "warning",
            center: true
          })
            .then(() => {
              let obj = {};
              obj.orderId = this.listObj.orderId;
              obj.desc = this.descForm.remark;
              obj.type = '5';
              insertApprovalRemark(obj)
              .then(res => {
                if (res.status === 200) {
                  this.dialogDescForm = false;
                  this.$emit('click-complete', '8')
                  this.$notify({
                    title: this.$t("user.success"),
                    message: this.$t("approvalDetail.cue2"),
                    type: "success",
                    duration: 2000
                  });
                }
              })
            })
            .catch(() => {
              this.$message({
                showClose: true,
                type: "info",
                message: this.$t("loanDetail.cue3")
              });
            });
        } else {
          return false;
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
input::-webkit-input-placeholder {
  font-size: 12px;
}
.approval-detail {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  position: relative;
}
.title {
  line-height: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before {
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.detail-info {
  font-size: 12px;
  display: flex;
  margin-left: 12px;
  margin-top: 5px;
  .detail-info-item {
    width: 50%;
    line-height: 25px;
    display: flex;
    padding-right: 10px;
    box-sizing: border-box;
    span:nth-child(1) {
      display: inline-block;
      width: 80px;
      text-align: left;
      margin-right: 5px;
      color: #616264;
    }
    span:nth-child(2) {
      color: #8a8a8c;
      display: inline-block;
      line-height: 25px;
    }
    .flag-btn {
      display: inline-block;
      font-size: 12px;
      width: 65px;
      height: 22px;
      line-height: 19px;
      text-align: center;
      margin-left: 15px;
      font-weight: normal;
      cursor: pointer;
    }
    button[disabled] {
      background: #c8c9cc !important;
      color: #fff !important;
      border: 1px solid #c8c9cc !important;
    }
  }
  .contact-list {
    width: 90%;
    margin: 10px 5%;
  }
}
.head-title {
  display: flex;
  line-height: 22px;
  .info {
    line-height: 28px;
    border: 1px solid #333;
    margin-left: 20px;
    font-size: 12px;
    border-radius: 5px;
    padding: 0 8px;
  }
}
.head-title2 {
  display: flex;
  justify-content: space-between;
}
.id-info {
  display: flex;
  margin-left: 12px;
  margin-top: 5px;
  .id-imgs {
    #image {
      width: 100%;
      display: flex;
      font-size: 12px;
    }
    #image > div {
      width: 50%;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-right: 3%;
      span {
        display: inline-block;
        line-height: 25px;
      }
      img {
        width: 100%;
        height: 180px;
      }
    }
  }
  .detail-info {
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .detail-info-item {
      width: 33%;
      line-height: 30px;
      display: flex;
      flex-wrap: wrap;
      padding-right: 10px;
      box-sizing: border-box;
      span:nth-child(1) {
        display: inline-block;
        width: 105px;
        text-align: left;
        margin-right: 5px;
        color: #616264;
      }
      span:nth-child(2) {
        flex: 1;
        color: #8a8a8c;
        display: inline-block;
        line-height: 30px;
      }
      span:nth-child(3) {
        display: inline-block;
        width: 30px;
      }
    }
  }
}
.id-photo {
  padding: 10px 0;
  box-sizing: border-box;
  #image2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  #image2 > div {
    width: 18%;
    margin: 5px auto;
    img {
      width: 100%;
      height: 180px;
    }
  }
}
.supply-img {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  span {
    font-size: 14px;
  }
}
.click-img {
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  background: #20a0ff;
  color: #fff;
  outline: none;
  border-width: 0;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 5px;
}
.hiddenInput {
  display: none;
}
.results {
  margin-left: 5px;
  color: #20a0ff;
  text-decoration: underline;
}
.cell-phone-item {
    width: 300px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
    padding: 3px 0;
    &:last-child {
        border-bottom: 1px solid #ccc;
    }
}
.bg1 {
  background:#98e48b;
}
#image3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  img {
    width: 100%;
    display: block;
    margin: 3px auto;
  }
}
</style>